<div class="story-title control-group">
    <div class="pull-left">
        <label class="control-label" for="text-title">{__('Title')}</label>
        <input bind:value="$title" class="input-xlarge span4" autocomplete="off" type="text" />

        <label class="control-label" for="text-intro">{__('Description')}</label>
        <textarea bind:value="$metadata.describe.intro" id="text-intro" class="input-xlarge span4"></textarea>

        <label class="control-label" for="text-notes">{__('Notes')}</label>
        <input bind:value="$metadata.annotate.notes" class="input-xlarge span4" type="text" />
    </div>

    <div class="row">
        <div class="span2">
            <label class="control-label">{__('Source name')}</label>
            <input bind:value="$metadata.describe['source-name']" class="span2" placeholder="{__('name of the organisation')}" type="text" />
        </div>
        <div class="span2">
            <label class="control-label">{__('Source URL')}</label>
            <input bind:value="$metadata.describe['source-url']" class="span2" placeholder="{__('URL of the dataset')}" type="text" />
        </div>
    </div>

    <div class="chart-byline">
        <label class="control-label">{__('visualize / annotate / byline')}</label>
        <input
            bind:value="$metadata.describe.byline"
            class="input-xlarge span4"
            placeholder="{__('visualize / annotate / byline / placeholder')}"
            type="text"
        />
    </div>
</div>

<script>
    import { __ } from '../shared/l10n';

    export default {
        helpers: { __ }
    };
</script>
